<template>
    <div class="country">
        <Nav></Nav>

        <Nav2 @get_product_id="get_id"></Nav2>
        <br>
        <div class="top-h1">
            <img :src="country_obj.img" alt="" class="cover">
            <h1>{{country_obj.name}}</h1>
        </div>

        <br>
        <br>
        <!--<div class="category">-->
            <!--<el-row>-->
                <!--<div style="display: inline-block" v-for="category in category_list" :key="category.name">-->
                    <!--<el-button type="danger" round class="but">{{category.name}}</el-button>-->
                <!--&lt;!&ndash;<el-button type="danger" round>海边度假</el-button>&ndash;&gt;-->
                    <!--</div>-->
            <!--</el-row>-->
        <!--</div>-->
        <div class="container">
            <div class="row">
                <div class="product" v-for="product in product_list" :key="product.name">
                    <img :src="img_url+product.cover" alt="" class="image">
                    <h4 class=desc>{{ product.title}}</h4>
                    <h5 class=desc style="color: #79747d">{{ product.desc}}</h5>
                    <span class="money">¥{{product.price}} /人</span>
                    <hr>
                </div>
            </div>
        </div>

        <Chat></Chat>
        <Foot></Foot>
    </div>

</template>

<script>
    import Nav from '../components/Nav'
    import Nav2 from '../components/Nav2'
    import Chat from '../components/Chat'
    import Foot from '../components/Foot'

    export default {
        name: "Country",
        components: {
            Nav, Nav2, Chat, Foot
        },
        data() {
            return {
                category: '',
                product_id: 0,
                country_obj: '',
                product_list: '',
                category_list: '',
                base_url: this.$settings.base_url,
                img_url: this.$settings.base_url+'/media/',
            }
        },
        methods: {
            get_id() {
                // 获取地址栏上面的productID
                this.product_id = this.$route.params.pk;
                this.$axios({
                    url: this.base_url + '/product/country/' + this.product_id
                }).then(response => {
                    this.country_obj = response.data;
                    this.product_list = response.data.product_list;
                });
                this.$axios({
                    url: this.base_url + '/home/nav_category'
                }).then(response => {
                    this.category_list = response.data;


                })


            },
        },
        created() {
            this.get_id()
        }

    }
</script>

<style scoped>
    .top-h1 {
        position: relative;
        z-index: 1;
    }

    .cover {
        height: 360px;
        width: 100%;

        z-index: 1;
    }

    .country {
        display: block;
    }

    h1 {
        display: inline-block;
        text-align: center;
        position: absolute;
        z-index: 2;
        top: 40%;
        left: 48%;
        color: white;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

    }

    .el-button + .el-button {
        margin-left: 50px;
    }

    .product {
        width: 335px;
        height: 315px;
        background: white;
        display: inline-block;
        margin-left: 50px;
        margin-top: 60px;
    }

    .desc {
        display: block;
        text-align: center;
        cursor: pointer;
    }

    .image {
        width: 335px;
        height: 220px;
        display: block;
        border-radius: 8px;
        cursor: pointer;
    }

    .money {
        color: #ff2b8a;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;

    }

    .category {
        margin-left: 13%;
    }
    .but{
        margin-left: 30px;
    }
</style>